import React from 'react';
import Taro from "@tarojs/taro";
import { View, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
import './HomeCategory.less'
import categoryList from './categoryList';

const HomeCategory = () => {
    const toPage=(path)=>{
        console.log(path);
    }
    return (
        <View className="home-category-wrap">
            <Swiper
                className='category-swiper h-container'
                indicatorColor='#999'
                indicatorActiveColor='#333'
                circular
                indicatorDots>
                {
                    categoryList.map((item, index) => {
                        return (
                            <SwiperItem key={item.page} className="category-group-wrap">
                                {
                                    item.category.map((subItem, subIdx) => {
                                        return (
                                            <View key={subItem.name} className="category-item" onClick={()=>toPage(subItem.path)}>
                                                <Image mode="widthFix" src={subItem.icon} />
                                                <Text>{subItem.name}</Text>
                                            </View>
                                        )
                                    })
                                }

                            </SwiperItem>
                        )
                    })
                }
            </Swiper>
        </View>
    );
}
export default HomeCategory;
